<template>
  <div class="homePage">
    <el-form
      class="loginForm"
      ref="loginForm"
      label-position="top"
      :model="loginForm"
      label-width="200px"
    >
      <h1 style="text-align:center">Sigin</h1>
      <el-form-item label="用户名:">
        <el-input v-model="loginForm.Username"></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input type="Password" v-model="loginForm.Password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="loginForm.RememberLogin">记住我</el-checkbox>
      </el-form-item>
      <div class="button">
        <el-button type="primary" @click="login(false)">登陆</el-button>
        <el-button type="error" @click="login(true)">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      loginForm: {
        Username: '',
        Password: '',
        ReturnUrl: '',
        RememberLogin: false,
        Cancle: false
      }
    }
  },
  created() {},
  mounted() {
    var url = this.$route.query.ReturnUrl
    this.loginForm.ReturnUrl = url
  },
  methods: {
    login(cancle) {
      this.loginForm.Cancle = cancle
      this.$api.account.login(this.loginForm).then(res => {
        window.location.href = res.data
      })
    }
  }
}
</script>

<style lang="scss">
.loginForm {
  padding: 20px;
  border-radius: $baseRadius;
  background-image: linear-gradient(#d27a8a, #f89c91);
  opacity: 0.7;
  label {
    float: left !important;
    font-weight: bold;
    font-size: 16px;
  }
  h1 {
    color: $deepColor;
  }
  width: 400px;
}
.homePage {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../../../public/Images/欢迎界面2.jpg');
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
